<template>
  <div class="device-center-container">
    <ul class="header-nav-box">
      <li
        @click="jumpView('productLineManage')"
        v-has="'deviceCenter:proLineManage'"
      >
        <div class="nav-icon pro-line-bgc">
          <i class="iconfont iconchanxian"></i>
        </div>
        <span class="nav-name">产线管理</span>
      </li>
      <li
        @click="jumpView('deviceManage')"
        v-has="'deviceCenter:deviceManage'"
      >
        <div class="nav-icon device-bgc">
          <i class="iconfont iconchanxian"></i>
        </div>
        <span class="nav-name">设备管理</span>
      </li>
      <li
        @click="jumpView('historyData')"
        v-has="'deviceCenter:historyData'"
      >
        <div class="nav-icon history-bgc">
          <i class="iconfont iconchanxian"></i>
        </div>
        <span class="nav-name">历史数据</span>
      </li>
      <li
        @click="jumpView('dataAnalyse')"
        v-has="'deviceCenter:dataAnalyse'"
      >
        <div class="nav-icon data-bgc">
          <i class="iconfont iconchanxian"></i>
        </div>
        <span class="nav-name">数据分析</span>
      </li>
    </ul>

    <div
      class="map-box"
      id="map"
      v-has="'deviceCenter:gisMap'"
    ></div>

    <ul
      class="device-status-box"
      v-has="'deviceCenter:gisMap'"
    >
      <li>
        <span
          class="device-num color-gray"
          :class="{'online': onlineNum > 0}"
        >{{ onlineNum }}</span>
        <div class="device-flag">
          <i class="iconfont iconzaixian"></i>
          <span>在线</span>
        </div>
      </li>
      <li>
        <span class="device-num offline">{{ offlineNum }}</span>
        <div class="device-flag">
          <i class="iconfont iconlixian"></i>
          <span>离线</span>
        </div>
      </li>
      <li>
        <span
          class="device-num color-gray"
          :class="{'danger': alarmNum > 0}"
        >{{ alarmNum }}</span>
        <div class="device-flag">
          <i class="iconfont iconyubaojing"></i>
          <span>报警</span>
        </div>
      </li>
    </ul>

    <van-popup
      v-if="showPointInfo"
      v-model="showPointInfo"
      position="bottom"
      :style="{ height: '25%' }"
    >
      <div class="device-info-box">
        <div class="info-top">
          <span class="color-primary">{{ pointInfo.name }}</span>
          <span
            class="color-deep-gray"
            v-if="pointInfo.status === 1"
          >
            <i class="iconfont iconlixian"></i>
            离线
          </span>
          <span
            class="color-green"
            v-if="pointInfo.status === 2"
          >
            <i class="iconfont iconzaixian"></i>
            在线
          </span>
          <span
            class="color-red"
            v-if="pointInfo.status === 4"
          >
            <i class="iconfont iconyubaojing"></i>
            报警
          </span>
        </div>
        <div class="info-center">
          <div class="info-img">
            <img :src="pointInfo.modelPhoto || require('@/assets/images/device_default.png')">
          </div>
          <div class="info-other">
            <p class="color-deep-gray">
              <span class="color-gray">设备编号：</span>
              {{ pointInfo.number }}
            </p>
            <p class="color-deep-gray">
              <span class="color-gray">物模型：</span>
              {{ pointInfo.modelName }}
            </p>
          </div>
        </div>
        <div class="info-bottom color-gray">
          <i class="iconfont icondingwei"></i>
          <span>{{ formatCity(pointInfo) }}</span>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup } from 'vant';
import { getDeviceList, getDeviceCount } from '@/api/deviceManage.js';

export default {
  name: 'DeviceCenter',
  components: {
    [Popup.name]: Popup
  },
  data() {
    return {
      deviceList: [],
      onlineNum: 0,
      offlineNum: 0,
      alarmNum: 0,
      map: '',
      showPointInfo: false,
      pointInfo: {}
    };
  },
  created() {
    this.$toast.clear();
    if (this.$checkBtnPermission('deviceCenter:gisMap')) {
      this.loadData();
    }
  },
  mounted() {
    if (this.$checkBtnPermission('deviceCenter:gisMap')) {
      this.$nextTick(() => {
        this.initMap();
      });
      let timer = setInterval(() => {
        this.loadData();
      }, 60000);
      // 通过 $once 来监听定时器，在 beforeDestroy 钩子可以被清除。
      this.$once('hook:beforeDestroy', () => {
        clearInterval(timer);
      });
    }
  },
  methods: {
    // 重新更新数据
    loadData() {
      this.getDeviceList();
      this.getDeviceCount();
    },
    // 初始化地图
    initMap() {
      // 创建Map实例
      /*eslint-disable-next-line*/
      let map = new BMapGL.Map('map', {
        minClusterSize: 4,
        maxZoom: 16
      });
      // 初始化地图,设置中心点坐标和地图级别
      map.centerAndZoom('长沙市', 5);
      // 启用滚轮放大缩小
      map.enableScrollWheelZoom();
      // 隐藏底图POI
      map.setDisplayOptions({
        poiIcon: false
      });

      this.map = map;
    },
    // 创建标记点
    createMarker(item) {
      let iconImg = '';
      switch (item.status) {
        case 1:
          iconImg = require('@/assets/images/deviceCenter/offline_icon.png');
          break;
        case 2:
          iconImg = require('@/assets/images/deviceCenter/online_icon.png');
          break;
        case 4:
          iconImg = require('@/assets/images/deviceCenter/alarm_icon.png');
          break;
      }
      // 创建小车图标
      /*eslint-disable-next-line*/
      let icon = new BMapGL.Icon(iconImg, new BMapGL.Size(22, 23));

      // 创建Marker标注，使用小车图标
      /*eslint-disable-next-line*/
      let pt = new BMapGL.Point(item.latitude, item.longitude);
      let marker = `marker${item.id}`;
      /*eslint-disable-next-line*/
      marker = new BMapGL.Marker(pt, {
        icon
      });
      // 将标注添加到地图
      this.map.addOverlay(marker);
      marker.addEventListener('click', () => {
        this.pointInfo = item;
        this.showPointInfo = true;
      });
    },
    // 获取设备列表
    getDeviceList() {
      getDeviceList().then(res => {
        if (res.data.list && res.data.list.length) {
          res.data.list.map(item => {
            if (item.longitude && item.latitude) {
              this.createMarker(item);
            }
          });
        }
      });
    },
    // 获取设备各状态数量
    getDeviceCount() {
      getDeviceCount().then(res => {
        if (res.data.list && res.data.list.length) {
          res.data.list.map(item => {
            switch (item.status) {
              // 1离线 2在线 3报警
              case 1:
                this.offlineNum = item.count || 0;
                break;
              case 2:
                this.onlineNum = item.count || 0;
                break;
              case 3:
                this.alarmNum = item.count || 0;
                break;
            }
          });
        }
      });
    },
    // 格式化城市
    formatCity(item) {
      console.log('item---', item);
      let result = item.city ? `${item.province}-${item.city}` : item.province;
      if (!item.city) {
        result = result ? `${item.countries}-${result}` : item.countries;
      }
      return result;
    },
    // 页面跳转
    jumpView(name) {
      this.$router.push({
        name
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.device-center-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .header-nav-box {
    flex-shrink: 0;
    display: flex;
    justify-content: space-around;
    width: 100%;
    padding: 0.426667rem 0;
    background-color: #fff;
    border-bottom: 1px solid #f2f6fc;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;

      .nav-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.12rem;
        height: 1.12rem;
        margin-bottom: 0.213333rem;
        border-radius: 0.48rem;
        color: #fff;

        i {
          font-size: 0.586667rem;
        }

        &.pro-line-bgc {
          background-color: #8987ff;
        }

        &.device-bgc {
          background-color: #469dfe;
        }

        &.history-bgc {
          background-color: #6ad7d1;
        }

        &.data-bgc {
          background-color: #7adf8a;
        }
      }

      .nav-name {
        font-size: 0.346667rem;
        color: #333333;
      }
    }
  }

  .map-box {
    flex: 1;
    width: 100%;
    background-color: #fff;
  }

  ::v-deep .anchorBL {
    display: none;
  }

  .device-status-box {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0.32rem 0.426667rem;
    background-color: #fff;
    border-top: 1px solid #f2f6fc;

    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 2.826667rem;
      height: 2.16rem;
      background-color: #fafafa;

      .device-num {
        margin-bottom: 0.266667rem;
        font-size: 0.48rem;
        font-weight: bold;

        &.online {
          color: #8dd77b;
        }
        &.offline {
          color: #999999;
        }
        &.danger {
          color: #f56c6c;
        }
      }

      .device-flag {
        display: flex;
        align-items: center;

        i {
          color: #999999;
        }

        span {
          margin-left: 0.106667rem;
          font-size: 0.32rem;
          color: #666666;
        }
      }
    }
  }

  ::v-deep .van-popup--bottom {
    border-top-left-radius: 0.426667rem;
    border-top-right-radius: 0.426667rem;

    .device-info-box {
      padding: 0.426667rem;

      .info-top {
        display: flex;
        justify-content: space-between;

        span {
          &:first-of-type {
            font-size: 0.426667rem;
          }
          &:last-of-type {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            font-size: 0.346667rem;

            i {
              margin-right: 0.106667rem;
            }
          }
        }
      }

      .info-center {
        display: flex;
        margin: 0.32rem 0;

        .info-img {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 3.2rem;
          height: 1.706667rem;
          padding: 0.266667rem 0.96rem;
          border: 1px solid #ebeef5;
          background-color: #fff;

          img {
            width: 100%;
          }
        }

        .info-other {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          margin-left: 0.213333rem;
          padding: 0.32rem 0;
          font-size: 0.346667rem;
        }
      }

      .info-bottom {
        display: flex;
        align-items: center;
        font-size: 0.32rem;

        i {
          margin-right: 0.213333rem;
          font-size: 0.373333rem;
        }
      }
    }
  }
}
</style>